<template>
  <div class="board">
    <div class="left">
      <course-panel
        v-for="({ name }, key) in data.courses"
        :key="name"
        :course-key="key + ''"
        :course-name="name"
        @drag-end-handle="dragEndHandle"
      ></course-panel>
    </div>
    <div class="right" @dragover="dragOverHandle" @dragenter="dragenterHandle">
      <table border="1">
        <thead>
          <tr>
            <th>节次/时间</th>
            <th v-for="(weekday, index) in data.weekday" :key="index">
              {{ weekday }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(timeSlot, index) in data.tite_slot" :key="index">
            <th>{{ timeSlot }}</th>
            <td
              v-for="weekday in 7"
              :key="weekday"
              :data-weekday="weekday"
              :data-time-slot="index"
            >
              <template v-if="cellData[`${weekday}-${index}`]">
                <course-panel
                  :course-name="
                    data.courses[cellData[`${weekday}-${index}`]].name
                  "
                  :course-key="cellData[`${weekday}-${index}`]"
                  v-course-panel="{ cellData, weekday, timeSlot: index }"
                ></course-panel>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import CoursePanel from './common/CoursePanel.vue'
import vCoursePanel from './vCoursePanel'

type Course = {
  name: string
  teachers: string[]
}

type Courses = {
  [key: string]: Course
}

const data = {
  weekday: [
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
    '星期日'
  ],
  tite_slot: [
    '08:00-08:50',
    '09:00-09:50',
    '10:00-10:50',
    '11:00-11:50',
    '14:00-14:50',
    '15:00-15:50',
    '16:00-16:50',
    '17:00-17:50',
    '18:00-18:50'
  ],
  courses: {
    chinese: {
      name: '语文',
      teachers: ['张三', '李四']
    },
    mathmatics: {
      name: '数学',
      teachers: ['王五', '赵六']
    },
    english: {
      name: '英语',
      teachers: ['小野森森', '小夏']
    }
  } as Courses
}

let targetCell: HTMLElement | null = null

const cellData: Ref<Record<string, string>> = ref({
  '1-1': 'chinese',
  '2-5': 'english',
  '7-3': 'mathmatics'
})

// 划入
const dragOverHandle = (e: Event) => {
  //  去除默认行为
  e.preventDefault()
}
// 进入
const dragenterHandle = (e: Event) => {
  e.preventDefault()
  const tar = e.target as HTMLElement
  const tagName = tar.tagName.toLowerCase()

  targetCell = tagName !== 'td' ? null : tar
}

const dragEndHandle = (target: HTMLElement) => {
  console.log(target)
  if (targetCell) {
    const weekday = targetCell.dataset.weekday
    const timeSlot = targetCell.dataset.timeSlot
    const prop = `${weekday}-${timeSlot}`

    if (!cellData.value[prop]) {
      const key = target.dataset.key
      cellData.value[prop] = key ?? ''
    }
  }
  console.log(cellData.value)
}
</script>

<style lang="scss" scoped>
.board {
  position: relative;
  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
  }

  .right {
    width: 100%;
    height: 800px;
    padding-left: 300px;
    box-sizing: border-box;
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;

      td {
        height: 80px;
      }
    }
  }
}
</style>
